<template>
  <n-drawer v-model:show="active" :default-height="700" placement="bottom" resizable>
    <n-drawer-content title="管理配置">
      <NButton
        type="error"
        :disabled="checkedRowKeysRef.length === 0"
        mb15
        @click="handleBatchDelete"
      >
        批量删除
      </NButton>

      <n-data-table
        :columns="columns"
        :data="tableData"
        :row-key="(row) => row.id"
        striped
        @update:checked-row-keys="handleCheck"
      />
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { NButton, NPopconfirm } from 'naive-ui'

import api from '../api.js'

const emit = defineEmits(['refresh', 'editConfiguration'])
const active = ref(false)
const configurationItemLoadings = ref([])

const columns = [
  {
    type: 'selection',
  },
  {
    title: '配置标题',
    key: 'name',
    align: 'center',
  },
  {
    title: '配置标识',
    key: 'config_key',
    align: 'center',
  },
  {
    title: '配置值',
    key: 'value',
    align: 'center',
  },
  {
    title: '排序',
    key: 'sort',
    align: 'center',
  },
  {
    title: '输入组件',
    key: 'input_type',
    align: 'center',
  },
  {
    title: '配置说明',
    key: 'remark',
    align: 'center',
  },
  {
    title: '操作',
    key: 'actions',
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            text: true,
            type: 'primary',
            style: 'margin-right: 10px',
            onClick: () => handleEditConfiguration(row),
          },
          {
            default: () => '编辑',
            icon: () => h('i', { class: 'i-fe:edit text-14' }),
          },
        ),
        h(
          NPopconfirm,
          {
            onPositiveClick: () => handleDelete(row.id),
          },
          {
            trigger() {
              return h(
                NButton,
                {
                  size: 'small',
                  text: true,
                  type: 'error',
                  loading: configurationItemLoadings.value[row.id],
                },
                {
                  default: () => '删除',
                  icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
                },
              )
            },
            default: () => `您确定要删除《${row.name}》配置项吗？`,
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
          },
        ),
      ]
    },
  },
]

const tableData = ref([])
const groupId = ref(0)

async function handleOpen(group_id) {
  groupId.value = group_id
  try {
    const { data } = await api.getConfigList({ group_id })
    data.forEach((item) => {
      if (item.config_select_data && item.config_select_data.length > 0) {
        item.config_select_data.forEach((d) => {
          d.value = d.content
        })
      }
    })
    tableData.value = data
    active.value = true
  }
  catch (e) {

  }
}

async function handleDelete(id) {
  configurationItemLoadings.value[id] = true
  try {
    const { message } = await api.deleteConfig({ ids: [id] })
    $message.success(message)
    tableData.value = tableData.value.filter(item => item.id !== id)
    emit('refresh', { group_id: groupId.value })
  }
  finally {
    configurationItemLoadings.value[id] = false
  }
}

function handleEditConfiguration(row) {
  emit('editConfiguration', row)
}

const checkedRowKeysRef = ref([])

function handleCheck(rowKeys) {
  checkedRowKeysRef.value = rowKeys
}

/**
 * 处理批量删除配置项的操作。
 *
 * 此函数通过显示一个对话框，确认用户是否真的想要批量删除所选的配置项。
 * 如果用户确认删除，它将触发一个异步操作来删除这些配置项，并在成功删除后更新配置项列表。
 */
function handleBatchDelete() {
  // 显示一个带有确认和取消选项的对话框，询问用户是否确认删除
  const d = $dialog.error({
    title: '删除',
    content: `你确定要批量删除这些配置项吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      // 当用户点击确定按钮时，开始显示加载状态
      d.loading = true
      // 返回一个Promise，以便处理异步操作
      return new Promise((resolve) => {
        // 调用API以批量删除配置项，使用逗号分隔的配置项ID列表
        api
          .deleteConfig(checkedRowKeysRef.value.join(','))
          .then(async (res) => {
            // 如果删除成功，显示成功消息
            $message.success(res.msg)
            // 加载更新后的配置项列表
            const { data } = await api.getConfigList({ group_id: groupId.value })
            // 更新表格数据以反映删除操作
            tableData.value = data
            // 解决Promise，表示异步操作已完成
            resolve()
            // 触发 'refresh' 事件，携带当前分组 ID 的信息
            emit('refresh', { group_id: groupId.value })
          })
          .finally(() => {
            // 无论删除成功与否，都停止显示加载状态
            d.loading = false
          })
      })
    },
  })
}

defineExpose({
  handleOpen,
})
</script>
